<template>
    <div>
        <el-container class="form-container">
            <el-card class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                    <span>角色维护</span>
                    <el-button type="primary" size="mini" style="float:right;padding: 6px 9px;" @click="submitForm">保存</el-button>
                </div>
                <div >
                   <el-form  :rules="rules"  ref="form"   :model="form" size="small" label-width="120px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item  label="角色名" prop="fdName">
                                    <el-input class="input" v-model="form.fdName" ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item  label="所属分类"  prop="fdCateName">
                                    <SelectTree
                                      :action="url"
                                      :props="props"
                                      :options="optionData"
                                      v-model="form.fdCateName"
                                      :id.sync="form.fdCateId"
                                      
                                      clearable
                                    />
                                </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="24">
                                <el-form-item  label="用户指派"  prop="fdOrgName">
                                    <fancy-address v-model="form.fdOrgName" :multi="true" :textArea="true" :id.sync="form.fdOrgId"  orgType="ORG|DEPT|PERSON" />
                                </el-form-item>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="12">
                                <el-form-item  label="是否有效"  prop="fdIsAvaliable">
                                    <el-switch v-model="form.fdIsAvaliable"/>
                                </el-form-item>
                            </el-col>
                          </el-row>
                   </el-form>
                   <el-col :span="24" v-for="(cateItem,index) in resList" v-show="cateItem.res.length>0" :key="cateItem.cateId">
                      <el-card class="box-card card">
                        <div slot="header" >
                          <span>{{cateItem.cateName}}</span>
                          <el-button style="float: right; padding: 3px 0" type="text" @click="handleSelectCateAll(cateItem,index)">{{selectAllText(index)}}</el-button>
                        </div>
                        <div>
                            <el-checkbox v-model="item.checked" v-for="(item,i) in cateItem.res" :key="item.id" :label="item.name"
                            @change="checked=>handleUpdateRes(checked,item,i)"></el-checkbox>
                        </div>
                      </el-card>
                    </el-col>
                </div>
            </el-card>
        </el-container>
    </div>
</template>
<script>
import SelectTree from "@/components/common/form/FancySelectTree";
import dateUtils from '@/utils/dateUtils';
import formUtils from '@/utils/formUtils';
export default {
    name: "SysPermissionRoleAdd",
    components: {
        SelectTree
    },
    data() {
        return {
          form: {
            fdCateName:'',
            fdName:'',
            fdCreateTime:'',
            fdIsAvaliable:true,
            fdId:'',
            fdCateId:'',
            checkedRes:[],
            fdOrgId:'',
            fdOrgName:'',
          },
          rules:{
            fdName :[{required: true, message: '请输入角色名', trigger: 'blur'}]
          },
          optionData: [],
          labelPosition:'right',
          fullscreenLoading:false,
          props: {
            label: "name",
            value: "id",
          },
          resList:[],
          url:"/sys/permission/sys_permission_role_category/treeData"
        }
    },
    created() {
        this.initParam();
        this.showResAndCates();
    },
    methods: {
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    let forms = formUtils.convertToModel(this.form);
                    this.$put('/api/sys/permission/sys_permission_role',forms).then((res) => {
                        if(res.status==1){
                            this.$message({
                                message: res.message,
                                type: 'success',
                                onClose:()=>{
                                    this.$common.closeTag();
                                }
                            });
                        }else{
                            this.$message.error(res.message);
                        }
                    });

                }
            });
        },
        initParam() {
            let fdId = this.$route.query.id;
            if(formUtils.isNotEmpty(fdId)){
                this.$fetch('/api/sys/permission/sys_permission_role',{
                    id:fdId
                }).then((res) => {
                    formUtils.convertToForm(res.data,this.form);
                });
            }
            let fdCategoryId = this.$route.query.fdCategoryId;
            if(formUtils.isNotEmpty(fdCategoryId)){
                this.$fetch('/api/sys/permission/sys_permission_role_category',{
                    id:fdCategoryId
                }).then((res) => {
                  this.form.fdCateId = res.data.fdId;
                  this.form.fdCateName = res.data.fdName;
                });
            };
            this.$fetch('/api/sys/permission/sys_permission_role_category/treeData',{
            }).then((res) => {
                this.optionData = res.data;
            });
        },
        showResAndCates() {
          let fdId = this.$route.query.id;
          this.$fetch('/api/sys/permission/sys_permission_res/all',{
              fdRoleId:fdId
          }).then((res) => {
              this.resList = res.data;
              res.data.forEach((value,index)=>{
                  let a = value.res.filter(v=>v.checked);
                  if(formUtils.isNotEmpty(a)){
                    this.form.checkedRes = this.form.checkedRes.concat(a.map(o=>o.key));
                  }
              })
          });
        },
        handleSelectCateAll(item,index) {
            const allSelect = !this.resList[index].cateAllSelected;
            this.resList[index].res.forEach(element => {
                element.checked = allSelect;
                if(allSelect){
                    this.form.checkedRes.push(element.key);
                    const set = new Set(this.form.checkedRes);
                    this.form.checkedRes = [...set];
                }else{
                    const index = this.form.checkedRes.findIndex((value)=>value === element.key);
                    this.form.checkedRes.splice(index,1);
                }
            });
            this.resList[index].cateAllSelected = allSelect;
            
        },
        handleUpdateRes(checked,item,index){
            if(checked){
                this.form.checkedRes.push(item.key);
                const set = new Set(this.form.checkedRes);
                this.form.checkedRes = [...set];
            }else{
                const index = this.form.checkedRes.findIndex((value)=>{
                    return value == item.key
                });
                this.form.checkedRes.splice(index,1);
            }
        }
    },
    computed: {
        selectAllText() {
            return function(index) {
                if(this.resList[index].cateAllSelected){
                    return "取消全选";
                }else{
                    return "全选";
                }
            }
        }
    }
}
</script>
<style scoped >
@import "~@/assets/css/form.css";
.card{
  margin-bottom: 20px;
}
</style>